import React, {useState} from 'react';
import './index.css';
import {SortableContainer, SortableElement, SortableHandle} from 'react-sortable-hoc';
import {Dialog, Icon} from "@alifd/next";
import BackgroundSetting from "./BackgroundSetting";
import TextCoverageSetting from "./TextCoverageSetting";
import ImageCoverageSetting from "./ImageCoverageSetting";


const Index = (props) => {

    const {bgData, setBgData, coverageData, addCoverage, statePage, setStatePage,onChangeData} = props;

    const [COVERAGE_VISIBLE, SET_COVERAGE_VISIBLE] = useState(false)

    const DragHandle = SortableHandle(() => <span className={"Showcase__style__handle"}>::</span>);

    const [itemData , setItemData] = useState(null)
    /**
     * 拖拽事件
     */
    const SortableItem = SortableElement(({value}) => (
        <li className={`Showcase__style__stylizedItem`} onClick={()=> {
            setStatePage(value.type)
            setItemData(value)
        }}>
            <div style={{display:"flex",alignItems:"center"}}>
                <DragHandle/>
                <div className="ShowcaseItem__contentBox">
                    <div className="fieldId">{value.filedId}</div>
                    <div className="type">{value.type}</div>
                    <div className="content">{value.type === "Text" ? value.content : ""}</div>
                </div>
            </div>
            <div className="ShowcaseItem__buttonBox">
                <div className="variate">{value.variable ? "变量" : ""}</div>
            </div>
        </li>
    ));
    const SortableList = SortableContainer(({children}) => {
        return <ul className={"Showcase__style"}>{children}</ul>;
    });
    const onSortEnd = ({oldIndex, newIndex}) => {
        const newArray = [...coverageData];
        const [removed] = newArray.splice(oldIndex, 1);
        newArray.splice(newIndex, 0, removed);
        addCoverage(newArray)
    };

    /**
     * 打开新建图层事件
     */
    const onOpenCoverage = () => {
        SET_COVERAGE_VISIBLE(true)
    };
    const onCloseCoverage = () => {
        SET_COVERAGE_VISIBLE(false)
    };


    return (
        <div className="Set_Box">
            <div className="filed_list">

                <div className={"Showcase__style__stylizedItem Showcase__style__add"} onClick={onOpenCoverage}>
                    <Icon type={"add"} size={"small"}/><span style={{fontSize: "1.2em"}}>新建图层</span>
                </div>
                <Dialog
                    v2
                    title="新建图层"
                    visible={COVERAGE_VISIBLE}
                    onOk={onCloseCoverage}
                    onClose={onCloseCoverage}
                    footer={false}
                    className="createShowcaseDialog"
                >
                    <div className={"addDialogBox"}>
                        <div className={"addDialogBoxButton"} onClick={() => {
                            addCoverage("text");
                            onCloseCoverage();
                        }}>
                            文本
                        </div>
                        <div className={"addDialogBoxButton"} onClick={() => {
                            addCoverage("image");
                            onCloseCoverage();
                        }}>
                            图片
                        </div>
                    </div>
                </Dialog>

                {/*  列表  */}
                <SortableList onSortEnd={onSortEnd} lockAxis="y" useDragHandle>
                    {coverageData.map((item, index) => (
                        <SortableItem key={`item-${item.filedId}`} index={index} value={item}/>
                    ))}
                </SortableList>

            </div>
            <div className="filed_states">
                {statePage === "bg" ? <BackgroundSetting value={bgData} setBgData={setBgData}/> : statePage === "Text" ? <TextCoverageSetting itemData={itemData} onChangeData={onChangeData}/> : statePage === "Image" ? <ImageCoverageSetting itemData={itemData} onChangeData={onChangeData}/> :""}
            </div>

        </div>
    );
};

export default Index;